<template>
  <div ref="LineCharts" class="line-charts"></div>
</template>

<script>
  export default {
    name: 'LineChart',
    props: {
      title: {
        type: String,
        default() {
          return ''
        }
      },
      xData: {
        type: Array,
        default() {
          return []
        }
      },
      yData: {
        type: Array,
        default() {
          return []
        }
      }
    },
    watch: {
      xData: {
        handler(val) {
          if (val.length > 0) {
            this.barChart()
          }
        },
        deep: true
      },
      yData: {
        handler(val) {
          if (val.length > 0) {
            this.barChart()
          }
        },
        deep: true
      }
    },
    mounted () {
      this.lineChart()
    },
    methods: {
    lineChart () {
      let lineChars = this.$echarts.init(this.$refs.LineCharts)
      let xAxis = {
          axisLine: {
            show: true,
            color: '#01beeb;'
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              fontSize: '24',
              color: '#ffffff'
            }
          },
          data: this.xData
        }
      let yAxis = {
        name: '数量（万件）',
        nameTextStyle: {
          color: '#ffffff',
          fontSize: 16,
          align: 'center'
        },
        nameLocation: 'end',
        splitLine: {
          show: true
        },
        axisLine: {
          show: true,
          color: '#000000'
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: '24',
            color: '#ffffff'
          }
        }
      }
      let option = {
        title: {
          show: false,
          text: this.title,
          left: '40%',
          top: '6%',
          textStyle: {
            fontSize: '16',
            color: '#ffffff',
            textShadowColor: '#ffffff',
            textShadowBlur: '10',
            textShadowOffsetY: 0,
            textShadowOffsetX: 0
          }
        },
        xAxis: xAxis,
        yAxis: yAxis,
        grid: {
          top: 40,
          left: 100
        },
        series: [
          {
            data: this.yData,
            type: 'line',
            label: {
              show: false
            },
            symbol: 'circle',
            symbolSize: 14,
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0,
                [{
                  offset: 0,
                  color: 'rgba(12,206,255,0)'
                },
                {
                  offset: 1,
                  color: 'rgba(0,222,255,0.5)'
                }])
              }
            },
            itemStyle: {normal: {color: '#32A8FF'}}
            // itemStyle: {
            //   normal: {
            //     // color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgba(5,106,175,0)'}, {offset: 1, color: 'rgba(95,250,255,1)'}])
            //     color: '#cccccc'
            //   }
            // },
          }
        ]
      }
      lineChars.setOption(option)
      window.addEventListener('resize', e => {
        lineChars.resize()
      })
    }
  }
  }
</script>

<style scoped>
  .line-charts {
    width: 100%;
    height: 100%;
  }
</style>
